{% load crispy_forms_filters %}
{% load i18n %}
{% load l10n %}
{% load settings_values %}

</div>
</div>
</div>
</div>

<div class="row mt-2" id="app">
  <div class="col-4">
    <div class="card mt-2">
      <div class="card-header" style="height: 60px;">
        <h3 class="card-title">{% translate "Chapters" %}</h3>
      </div>
      <div class="list-group list-group-flush list-group-hoverable">
        <v-node v-for="child in chapters" :chapter="child" :key="child.id" :current-item="chapter"></v-node>
      </div>
    </div>
  </div>

  <div class="col-8">
    <div class="card mt-2">
      <div class="card-header">
        <h3 class="card-title">Content</h3>
        <div class="card-actions">
          <input type="text" class="form-control" v-model="chapter.name" name="example-text-input" placeholder="Input placeholder">
        </div>
      </div>
      <div class="card-body">
        <div v-show="chapter.type === 0" id="element"></div>
        <div v-show="chapter.type === 1"><p class="mb-0">{% translate "Folders can't have content" %}</p></div>
        <div v-show="chapter.type === 2">
          <div class="mb-3" v-for="(item, idx) in chapter.content.blocks" :key="item.id">
            <div class="row g-2">
              <div class="col">
                <label class="form-label">{% translate "The question you want to ask:" %}</label>
                <input type="text" class="form-control" name="example-text-input" v-model="item.content" placeholder="What's...">
              </div>
              <div class="col-auto">
                <button class="btn btn-danger" style="margin-top: 28px;" @click="removeQuestion(idx)">X</button>
              </div>
            </div>
            <div class="form-check" v-for="(option, optionIdx) in item.items" :key="option.id">
              <div class="row g-2">
                <div class="col">
                  <input class="form-check-input" type="radio" placeholder="option..." :name="'name' + option.id" v-model="item.answer" :value="option.id" @click="item.answer = option.id" style="margin-top: 10px;">
                  <input type="text" class="form-control mt-1" v-model="option.text" name="example-text-input" placeholder="option...">
                </div>
                <div class="col-auto">
                  <button class="btn btn-danger" style="margin-top: 4px;" @click="removeOption(idx, optionIdx)">X</button>
                </div>
              </div>
            </div>
            <a class="btn btn-primary" style="float:unset" role="button" @click="addOption(item.items)">{% translate "Add option" %}</a>
          </div>
          <a class="btn btn-primary" role="button" @click="addQuestion">{% translate "Add question" %}</a>
        </div>
      </div>
    </div>
  </div>
  <input name="chapters" v-model="JSON.stringify(chapters)" style="display:none" />
</div>

<script type="text/x-template" id="v-node">
  <div>
    <div class="list-group-item" style="border-left:0px" >
      <div class="row align-items-center" >
        <div class="col-auto"><span :class="{ 'bg-primary': chapter.id === currentItem.id }" class="badge"></span></div>
        <div role="button" @click="changeChapter(chapter)" class="col text-truncate">
          <a class="text-body d-block">[[ chapter.name ]]</a>
        </div>
        <div class="col-auto">{% include '_chapter_options.html' %}</div>
      </div>
    </div>
    <div v-if="chapter.children && chapter.children.length" style="margin-left: 10px; border-left: 0px">
      <v-node v-for="child in chapter.children" :key="child.id" :chapter="child" :current-item="currentItem"></v-node>
    </div>
  </div>
</script>
{% if field.value and field.value is not None %}
{{ chapters|json_script:"chapters" }}
{% endif %}

<div>
<div>
<div>
